<template>
    <div class="shop">
     
     <el-button size="mini" type="primary" style="float:right;" @click="searchredPacketList">搜素</el-button>
     <el-input size="mini" style="float:right;width:240px;margin-bottom:12px;" v-model="mobile" placeholder="输入用户账号搜索"></el-input>
     
       <el-select style="width:100px;margin-right:12px;float:right;"
          v-model="order_status"
          filterable
          size="mini"
          placeholder="订单状态">
          <el-option 
            label="待支付"
            :value="1"></el-option>
        <el-option 
            label="已支付"
            :value="5"></el-option>
        <!-- <el-option label="已核销"
            :value="10"></el-option> -->
        <el-option label="已取消"
            :value="15"></el-option>
            <!-- <el-option label="已关闭"
            :value="20"></el-option> -->
        </el-select>


     <el-table   :data="tableData"
      max-height="720"
      style="width:100%;margin:12px;"
      :cell-style="tc"
      :header-cell-style="tccolor">
      
      <el-table-column label="订单流水号" prop="out_order_no"></el-table-column>
      <el-table-column label="时间" prop="created_at"></el-table-column>
      <el-table-column label="用户账号">
        <template slot-scope="scope">
          <p v-if="scope.row.user">{{scope.row.user.mobile}}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="充值红包">
          <template slot-scope="scope">
              <p v-if="scope.row.order_product">{{scope.row.order_product.extends.red_packet_price}}元</p>
              <p v-else>---</p>
          </template>
      </el-table-column>
      <el-table-column label="实付金额">
         <template slot-scope="scope">
              <p v-if="scope.row.order_product">{{scope.row.order_product.extends.price}}元</p>
              <p v-else>---</p>
          </template>
      </el-table-column>
      <el-table-column label="订单状态">
         <template slot-scope="scope">
           <p v-if="scope.row.order_status == 1"> 待支付 </p>
           <p v-if="scope.row.order_status == 5">已支付</p>
           <p v-if="scope.row.order_status == 10">已完成</p>
           <p v-if="scope.row.order_status == 15">已取消</p>
           <p v-if="scope.row.order_status == 20">已关闭</p>
         </template>
      </el-table-column>
      </el-table>

      <div class="pagination">
      <el-pagination
        background
        @current-change="pageChange"
        :current-page="page"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    </div>
</template>

<script>
import { redpacketSerchordertype } from "@/api/redpacket"
export default {
    data(){
        return{
           page:1,
           size:15,
           mobile:'',
           order_status:'',
           tableData:[],
           total:0,

        }
    },
    created(){
      this.getredpacketSerchordertypeData()
    },
    methods:{
      

      //搜索
      searchredPacketList(){
         this.getredpacketSerchordertypeData()
      },
      pageChange(page){
        this.page = page
        this.getredpacketSerchordertypeData()
      },

      async getredpacketSerchordertypeData(){
        
        var url ='&page='+this.page+
                 '&mobile='+this.mobile+
                 '&order_status='+this.order_status
        let res = await redpacketSerchordertype(url)
        
        if(res.code === 10000){
         this.tableData = res.data.data
         this.total = res.data.total
        }else{
          this.$message.error(res.message)
        }
      },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
}
</script>

<style lang="scss" scoped>
.shop{
    padding: 20px;
    .pagination{
        float: right;
    }
}
</style>